<template>
  <div class="llm">
    <div class="llm-model" @click="showLLM = true">
      <template v-if="llm">
        <div class="model">
          <i class="icon iconfont icon-ai-chat"></i>
          {{ llm.model }}
        </div>
        <div class="status status--success" v-if="llmStatus == 1">连接成功</div>
        <div class="status status--fail" v-else-if="llmStatus == 0">连接失败</div>
        <div class="status status--loading" v-else-if="llmStatus == -1">模型检查中</div>
      </template>
      <template v-else> 设置模型 </template>
    </div>

    <el-drawer title="大模型设置" v-model="showLLM" size="1024px" @open="handleOpen">
      <div class="llm-list">
        <div
          class="llm-item"
          v-for="item in llms"
          :key="item"
          :class="{ 'llm-item--active': item.enable }"
          @click="handleEdit(item)"
        >
          <at-info label-width="30px">
            <template #title>
              <span>{{ item.model }}</span>
            </template>
            <template #extra>
              <el-button link type="primary" icon="delete" @click.stop="handleDelete(item, index)">
                删除
              </el-button>
            </template>
            <at-info-item label="温度">{{ item.temperature }}</at-info-item>
            <at-info-item label="思考">{{ item.think ? '是' : '否' }}</at-info-item>
            <at-info-item label="启用">{{ item.enable ? '是' : '否' }}</at-info-item>
          </at-info>
        </div>
      </div>
      <div class="action">
        <el-button type="primary" @click="handleAdd" icon="plus">添加模型</el-button>
      </div>
      <EditLLM v-model="edit.show" :data="edit.data" @submit="initData" />
    </el-drawer>
  </div>
</template>

<script setup>
import http from '@/utils/http'
import EditLLM from './EditLLM.vue'
import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()

const showLLM = ref(false)
const edit = reactive({
  show: false,
  data: {},
})

const llms = ref([])
const llmStatus = ref(-1)

onMounted(() => {
  initData()
})

const llm = computed(() => {
  return llms.value.find(item => item.enable)
})

function getLLMStatus() {
  llmStatus.value = -1
  http({
    url: '/hids/llm/config/status',
    showError: false,
  })
    .then(res => {
      llmStatus.value = res.status
    })
    .catch(() => {
      llmStatus.value = 0
    })
}

const handleSelect = item => {
  http({
    method: 'PUT',
    url: '/hids/llm/config',
    data: {
      ...item,
      enable: true,
    },
  }).then(res => {
    initData()
  })
}

function initData() {
  return http({
    method: 'post',
    url: '/hids/llm/config/list',
    data: {
      pagenum: 0,
      pagesize: 100,
    },
  }).then(res => {
    if (!res || res.length == 0) {
      router.replace('/llm/init')
      return
    }

    llms.value = res
    getLLMStatus()

    return res
  })
}

const handleOpen = () => {
  initData()
}

const handleAdd = () => {
  edit.show = true
  edit.data = {}
}

const handleEdit = item => {
  edit.show = true
  edit.data = { ...item }
}

// 删除卫星
const handleDelete = (item, index) => {
  ElMessageBox.confirm('确认删除?', '提示', {
    type: 'warning',
  }).then(() => {
    // if (clusterList.value.length == 1) return ElMessage.error('删除失败，请确保至少存在一个卫星')

    // 删除卫星之前需要禁用审计日志
    // const enable = await getAuditStatus()
    // if (enable) await disabledAuditStatus()

    http
      .delete('/hids/llm/config', {
        data: {
          id: item.id,
        },
      })
      .then(() => {
        llms.value.splice(index, 1)
        // ElMessage.success('删除成功')

        initData()
      })
  })
}
</script>

<style lang="scss" scoped>
.llm-model {
  cursor: pointer;
  // background-color: rgba($color: #155724, $alpha: 0.2);

  display: flex;
  align-items: center;

  .model {
    // background-color: #233445;
    // background: linear-gradient(135deg, #3498db, #2c3e50);
    // background: linear-gradient(135deg, #6a3093, #a044ff);
    background: linear-gradient(135deg, #e74c3c, #e67e22);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    i {
      margin-right: 4px;
      margin-top: 2px;
    }
  }

  .status {
    margin-left: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
  }

  .status--success {
    background-color: rgba($color: #1bb76e, $alpha: 0.1);
    color: #1bb76e;
  }

  .status--fail {
    background-color: #f8d7da;
    color: #721c24;
  }

  .status--loading {
    background-color: #fff3cd;
    color: #856404;
  }
}

.llm-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.llm-item {
  border: 1px solid var(--border);
  padding: 20px 20px 6px 20px;
  cursor: pointer;
  &:hover {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }
  &.llm-item--active {
    // border: 1px solid var(--primary);
    border-top: 2px solid var(--primary);
  }
}

.llm-item__title {
  font-size: 16px;
  color: #000;
  margin-bottom: 12px;
}

.action {
  display: flex;
  justify-content: center;
  margin: 40px 0 20px 0;
}
</style>
